<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/el/element.css}">
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>

    <script th:src="@{/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.min.js}" type="text/javascript"></script>
    <title>发布博客</title>
</head>
<style>
    .context
    {
        position: absolute;
        z-index: 2;

    }
</style>
<body>
    <div id="app">

        <el-container>
            <el-header>
                <div th:include="~{common/homePage::head}"></div>
            </el-header>
            <el-container>
                <el-aside width="250px">
                    <div th:include="~{common/sidebar::sidebar}"></div>
                </el-aside>
                <el-main>
                    <el-form :model="ruleForm" class="context" :rules="rules" ref="ruleForm">
                        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                            <el-input v-model="ruleForm.title" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="博客分区" :label-width="formLabelWidth" prop="typeid">
                            <el-select v-model="ruleForm.typeid" placeholder="请选择">
                                <el-option
                                        v-for="item in types"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="博客内容" :label-width="formLabelWidth">
                            <div class="editor " id="editor" ></div>
                        </el-form-item>
                        <el-form-item  :label-width="formLabelWidth" >
                                <el-button @click="add2Blog()">取 消</el-button>
                                <el-button type="primary" @click="addBlog('ruleForm')" >确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>


        <!--        个人博客列表-->
        <el-dialog title="个人博客" :visible.sync="myblogFlag">
            <el-table :data="myblogs"  max-height="300">
                <el-table-column property="title" label="标题" width="150"></el-table-column>
                <el-table-column property="author" label="作者" width="100"></el-table-column>
                <el-table-column property="readvolume" label="阅读量"></el-table-column>
                <el-table-column property="review" label="评论数"></el-table-column>
                <el-table-column  fixed="right"
                                  label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="updBlog(scope.row.id)">更新博客</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!--        密码修改-->
        <el-dialog title="密码修改" :visible.sync="dialogFormVisible">
            <el-form :model="user">
                <el-form-item label="新密码" :label-width="formLabelWidth">
                    <el-input v-model="user.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updPwd()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="用户名修改" :visible.sync="dialogFormVisible2">
            <el-form :model="user">
                <el-form-item label="新的名字" :label-width="formLabelWidth">
                    <el-input v-model="user.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="updName()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            dialogFormVisible:false,
            dialogFormVisible2:false,
            myblogFlag:false,
            formLabelWidth:"120px",
            activeIndex: '1',
            activeIndex2: '1',
            activeName: '1',
            condition:"",
            myblogs:[{}],
            blog:{
                createTime:"",
                modifyTime:""
            },
            user:[{}],
            topblog:[{}],
            types:[],
            blogContext: {},
            blogcont:{
                blog:{
                    title:"",
                    typeid:"",
                },
                blogContext:{

                }
            },
            editor:null,
            ruleForm:{
                title:"",
                typeid:"",
            },
            rules: {
                title: [
                    { required: true, message: '请输入博客的标题', trigger: 'blur' },
                ],
                typeid: [
                    { required: true, message: '请选择合适的博客类型', trigger: 'change' },
                ],
            }

        },
        methods:{
                init() {
                    var E = window.wangEditor;
                    this.editor = new E(document.getElementById('editor'));
                    this.editor.config.uploadImgShowBase64 = true
                    // 图片上传格式
                    // 隐藏网络图片, 把图片转成 base 64
                    this.editor.config.pasteFilterStyle = false
                    // 自定义颜色
                    this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                    // 配置字体
                    this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                    //创建
                    this.editor.create();
                    // 富文本内容
                    this.editor.txt.html();
                },

                go2Back()
                {
                    window.location.href="/login/index"
                },
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                showContext(blogid){
                    window.location.href="/public/findById/"+blogid
                },
                add2Blog(){
                    this.blog={};
                    top.location.href="/login/index"
                },
                addBlog(formName){

                    var content = this.editor.txt.html();

                    console.log(this.ruleForm)


                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (content==null||content=="")
                            {
                                this.$message({
                                            showClose: true,
                                            offset: 100,
                                            duration:1000,
                                            message:"还没有输入文章的内容~",
                                            type: 'error'
                                        });
                                return;
                            }

                            this.blogcont.blog.title=this.ruleForm.title
                            this.blogcont.blog.typeid=this.ruleForm.typeid
                            this.blogcont.blogContext.context=content;
                            console.log(12312312312312)
                            console.log(this.blogcont)
                            var that = this;
                            axios.post("/api/blog/addBlog",this.blogcont)
                                .then(resp=>{
                                    console.log(resp)
                                    if (resp.data.data)
                                    {
                                        that.$message({
                                            showClose: true,
                                            offset: resp.data.code,
                                            message:resp.data.msg,
                                            type: 'warning'
                                        });
                                    }else
                                    {
                                        that.$message({
                                            showClose: true,
                                            offset: resp.data.code,
                                            message:resp.data.msg,
                                            type: 'error'
                                        });
                                    }
                                    this.ruleForm.title=""
                                    this.ruleForm.typeid=""
                                    this.editor.txt.html()
                                    this.setCookie("blogid", 0,"/api/blog/go2AddBlog", 1)
                                    window.location.href="/login/index"
                                });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                findByBlogType(typeid){
                    //此页不处理类型博客请求，跳转到主页处理
                    this.setCookie("typeid",typeid,"/login/index;",1)
                    // document.cookie="typeid="+typeid+";path=/login/index;"
                    window.location.href="/login/index"
                },
                setCookie(c_name, value,path, expiredays){
                    var exdate=new Date();
                    exdate.setDate(exdate.getDate() + expiredays);
                    document.cookie=c_name+ "=" + value +";path="+path+";" + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
                },
                getCookie(name)
                {
                    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

                    if (arr = document.cookie.match(reg))
                    {
                        return (arr[2]);
                    }
                    else{
                        return null;
                    }
                },
                searchBlog(){
                    this.setCookie("condition",this.condition,1)
                    window.location.href="/login/index"
                },
                handleCommand(command) {

                   if(command=="logOut")
                    {
                        window.location.href="/logOut"
                    }else if(command=="add2Blog")
                    {

                    }else if(command=="findAllBLog")
                    {
                        this.findAllBlogs()
                        this.myblogFlag=true;
                    }else if (command=="go2UserInfo")
                    {
                        window.location.href="/user/go2MyInfo"
                    }
                },
                go2Login(){
                    window.location.href="/login/go2LogIn"
                },
                findAllBlogs(){
                    axios.get("/api/blog/findAll")
                        .then(resp=>{
                            this.myblogs=resp.data.data
                        })
                },
                updBlog(id){
                    this.setCookie("blogid",id,"/api/blog/go2AddBlog",1)
                    window.location.href="/api/blog/go2AddBlog"
                }

            },
        mounted:function(){
            this.init();

            //排行榜
            axios.get("/public/findByCTTop/readvolume")
                .then(resp=>{
                    this.topblog = resp.data.data
                })

            //类型初始化
            axios.get("/public/type/findAll")
                .then(resp=>{
                    console.log(resp)
                    this.types=resp.data.data;
                });




            if (document.cookie.length>0&&document.cookie.indexOf("blogid")>=0) {
                // var blogid = document.cookie.split("=")[1]
                var blogid = this.getCookie("blogid");
               if(blogid!=0)
               {
                   axios.get("/api/blog/findBlogById/"+blogid)
                       .then(resp=>{
                           console.log(123)
                           console.log(resp.data.data)
                           this.ruleForm.title=resp.data.data.blog.title
                           this.ruleForm.typeid=resp.data.data.blog.typeid
                           this.blogcont.blog=resp.data.data.blog
                           this.blogcont.blogContext=resp.data.data.blogContext
                           this.editor.txt.html(this.blogcont.blogContext.context);
                           //防止刷新页面后还在调用这个方法
                           this.setCookie("blogid", 0, "/api/blog/go2AddBlog",1)

                       })


               }
            }
        }



    })
</script>
</html>